.box{
    width: 600px;
    height: 600px;
    border: 1px solid#000;
    // border-bottom: 300px solid#000;
    margin:0 auto;
    margin-top: 50px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    transition: all 2s ease;
    .son{
        width: 300px;
        height: 600px;
        border: 1px solid#000;
        background-color: #000;
    }
    .yuan{
        width: 300px;
        height: 300px;
        border: 1px #000;
        background-color: #000;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 50%;
        .son1{
            width: 100px;
            height: 100px;
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    }
    .yuandian{
        width: 300px;
        height: 300px;
        border: 1px #000;
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 50%;
        .son2{
            width: 100px;
            height: 100px;
            background-color: #000;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    }
    &:hover{
        transform: rotate(1080deg);
    }
}